<template>
  <div class="pie-box">
    <!-- <div :id="id" :style="{width:width,height:height}"></div> -->
    <div class="money">估值：
      <span>{{money}}</span>(万元)
    </div>
    <!-- 专利指数 -->
    <div class="center-box">
      <ul id="clock" class="clock">
        <li v-for="(item, index) in liNumber" :key="index" :class="{active: index < (Math.ceil(J / 100  * liNumber))}" :style="{transform: `rotate(${Number(index) * 10}deg)`}"></li>
      </ul>
      <p class="number">
        <span>专利指数</span>
        <i>{{J}}</i>
      </p>
    </div>
    <!--  -->
    <!-- <div class="outside-box">
      <el-progress type="circle" :percentage="82" :show-text="false" :width="212" color="#504da6" class="elprogress"></el-progress>
      <div class="money">{{data.money || 0}}</div>
    </div> -->
  </div>
  
</template>

<script>
import resize from "@/utils/resize"
export default {
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: ""
    },
    height: {
      type: String,
      default: ""
    },
    J: {
      type: String,
      default: ""
    },
    data: {
      type: Object
    }
  },
  data() {
    return {
      chart: null,
      liNumber: 36,
      money: '',
    };
  },
  methods: {
    getMoney() {
      if (Object.keys(this.data).length > 0 && this.data.money) {
        let dataMoney = JSON.parse(JSON.stringify(this.data.money))
        let money = (dataMoney / 10000).toFixed(2)
        this.money = money
      }
    }
  },
  watch: {
    J(val) {
      if (val) {
        // this.getChart(val);
      }
    },
    data() {
      this.getMoney()
    }
  },
  mounted() {
    this.getMoney()
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
}
</script>

<style lang="scss" scoped>
.pie-box {
  position: relative;
  border: 1px solid #ddd;
  background-color: #fbfcff;
  // margin-top: -10px;
  .money {
    position: relative;
    display: inline-block;
    line-height: 40px;
    padding: 0 10px;
    border-radius: 4px;
    margin: 10px;
    text-align: left;
    font-size: 12px;
    color: #fff;
    background-color: #504da6;
    margin-bottom: 30px;
    span {
      font-size: 20px;
    }
  }
  .center-box {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto;
    .clock {
      position: relative;
      width: 100%;
      height: 100%;
      list-style: none;
      li {
        position: absolute;
        top: 0;
        left: 75px;
        width: 5px;
        height: 12px;
        background-color: #e5e7f0;
        transform-origin: 0 75px;
        &.active {
          background-color: #504da6;
        }
      }
    }
    .number {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 100px;
      margin-top: -50px;
      text-align: center;
      span {
        display: inline-block;
        width: 100%;
        padding-top: 20px;
        font-weight: bold;
        font-size: 14px;
        letter-spacing: 1px;
        color: #4f515b;
      }
      i {
        display: inline-block;
        width: 100%;
        font-weight: bold;
        font-size: 36px;
        color: #504da6;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .outside-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 212px;
    height: 212px;
    border-radius: 50%;
    margin-top: -106px;
    margin-left: -106px;
    .elprogress {
      transform: rotate(-10deg);
    }
    // .money {
    //   position: absolute;
    //   top: -4px;
    //   left: -50px;
    //   padding: 4px 10px;
    //   border: 2px solid #504da6;
    //   border-radius: 6px;
    //   text-align: center;
    //   font-size: 20px;
    //   color: #504da6;
    //   background-color: #fff;
    // }
  }
}

</style>